<ngm-analytical-grid class="flex-1"
  [displayDensity]="styling?.appearance?.displayDensity"
  [appearance]="styling?.appearance"
  [styling]="styling"
  [title]="title"
  [dataSettings]="dataSettings$ | async"
  [slicers]="selectOptions$ | async"
  [options]="options$ | async"
  [columns]="columns()"
  (columnSelectionChanging)="onColumnSelectionChanging($event)"
  (slicersChanging)="onSlicersChanging($event)"
  (explain)="setExplains($event)"
  (entityTypeChange)="entityType.set($event)"
>
  <div ngmAction class="flex items-center">
    <button mat-icon-button displayDensity="cosy" *ngIf="pin" (click)="unlinkAnalysis()">
      <mat-icon fontSet="material-icons-outlined">push_pin</mat-icon>
    </button>
    <button mat-icon-button displayDensity="cosy" [color]="(hasSlicers$ | async) ? 'accent':''"
      [matMenuTriggerFor]="filtersMenu">
      <mat-icon fontSet="material-icons-outlined">filter_alt</mat-icon>
    </button>
  </div>  
  
</ngm-analytical-grid>

<div *ngIf="editable && (placeholder$ | async)" class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
  @if (analytics) {
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" width="100%" height="100%">
      <!-- Header Row -->
      <rect x="5" y="5" width="90" height="20" fill="#e0e0e080" />
      <rect x="105" y="5" width="90" height="20" fill="#e0e0e080" />
      <rect x="205" y="5" width="90" height="20" fill="#e0e0e080" />
    
      <!-- First Row -->
      <rect x="5" y="30" width="90" height="40" fill="#e0e0e050" />
      <rect x="105" y="30" width="90" height="40" fill="#e0e0e050" />
      <rect x="205" y="30" width="90" height="40" fill="#e0e0e050" />
    
      <!-- Second Row -->
      <rect x="5" y="75" width="90" height="40" fill="#e0e0e050" />
      <rect x="105" y="75" width="90" height="40" fill="#e0e0e050" />
      <rect x="205" y="75" width="90" height="40" fill="#e0e0e050" />
    
      <!-- Third Row -->
      <rect x="5" y="120" width="90" height="40" fill="#e0e0e050" />
      <rect x="105" y="120" width="90" height="40" fill="#e0e0e050" />
      <rect x="205" y="120" width="90" height="40" fill="#e0e0e050" />
    </svg>
  } @else {
    <pac-placeholder-add></pac-placeholder-add>
    <span class="ngm-story-widget__placeholder-title">{{ 'Story.Widgets.AnalyticalGrid.Title' | translate: {Default: 'Analytical Grid'} }}</span>
  }
</div>

<mat-menu #filtersMenu="matMenu" class="pac-widget__slicer-menu">
  <ngm-slicers class="overflow-hidden" inline editable
    [slicers]="selectOptions$ | async"
    [dataSettings]="dataSettings$ | async"
    [limit]="5"
    [capacities]="[SlicersCapacity.CombinationSlicer, SlicersCapacity.AdvancedSlicer, SlicersCapacity.Variable]"
    (valueChange)="setSelectOptions($event)"
    (click)="$event.stopPropagation()"
  ></ngm-slicers>
</mat-menu>
